<template>
  <!-- 待支付 -->
  <layout title="订单详情"  background="#fff">
    <view class="order-detail cancel">
      <view class="card">
        <view class="card-title mg-b-20 cancel-title">您的订单已取消</view>
      </view>

      <view class="card mg-t-30">
        <view class="card-info mg-t-15">
          <view class="card-info-label">任务号:</view>
          <view class="card-info-value"
            >{{orderInfo.tradeNo || '-'}}
            <image
            @tap="clip"
              class="card-icon-copy"
              :src="getImgSrc('/cuser/icon_copy@2x.png')"
            />
          </view>
        </view>
        <view class="card-info">
          <view class="card-info-label">预计完成:</view>
          <view class="card-info-value">{{estimatedTime}}</view>
        </view>
        <view class="card-info">
          <view class="card-info-label">赏金金额:</view>
          <view class="card-info-value"
            ><text>{{orderInfo.fee}}</text>元 已优惠<text>{{orderInfo.coupon||0}}</text>元</view
          >
        </view>
      </view>

      <view class="card detail">
        <view class="detail-title">地点信息</view>
        <view class="detail-address">
          <view class="detail-take">
            <text class="detail-icon">始</text>
            <text>{{takeAddress}}</text>
          </view>
          <view class="detail-receive">
            <text class="detail-icon">终</text>
            <text>{{receiveAddress}}</text>
          </view>
        </view>
        <view class="detail-info">
          <view class="detail-category">
            <view>任务类型：{{(orderInfo.goodsTypeList || []).join('、')}}</view>
            <view>难度系数/kg：{{orderInfo.weight || 0}}kg</view>
            <view>备注：{{orderInfo.remark}}</view>
          </view>
        </view>
      </view>
    </view>
  </layout>
</template>
<script>
import moment from 'moment'
export default {
  props: {
    latitude: {
      type: Number,
    },
    longitude: {
      type: Number,
    },
    orderId: {
      type: String
    },
    orderInfo: {
      type: Object,
    },
     takeAddress: {
      type: String,
    },
    receiveAddress: {
      type: String,
    },
  },
  data() {
    return {};
  },
  onShow() {},
  watch: {},
  computed: {
			estimatedTime() {
				const time = this.orderInfo.requestedTime;
        console.log('time: ', time);
				if(!time) return '-';
				try {
					return moment(time.replace(/-/, '/')).add(1, 'hour').format('YYYY-MM-DD HH:mm:ss')
				}catch(err) {
					return time
				}
			}
		},
  methods: {
    pay() {
      // 支付订单
    },
    clip() {
      uni.setClipboardData({
        data: this.orderInfo.tradeNo,
        showToast: true
      })
    },
    cancelOrder() {
      const self = this;
      uni.showModal({
        content: "是否确认取消订单",
        success: (res) => {
          if (res.confirm) {
            self.$u.api
              .invokeCancelOrder({ tradeNo: self.orderId })
              .then((res) => {
                if (res.code === 200) {
                  uni.showToast({ title: "取消成功" });
                  self.$emit("onRefresh");
                }
              });
          } else {
          }
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";

.cancel {
  min-height: 100%;
  &-title {
    color: #666;
  }
  padding-top: 30rpx;
  padding-bottom: 45rpx;
  .detail {
    // margin-top: 30rpx;
    padding: 36rpx 0 45rpx 0;
    &-address {
      padding-top: 46rpx;
      padding-left: 40rpx;
    }
    &-category {
      padding-left: 40rpx;
    }
  }

  .tip {
    margin: 23rpx auto 57rpx;
  }

  .card-title {
    padding-top: 30rpx;
  }

  .operation {
    margin: 50rpx auto 10rpx;
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
}
</style>
